import React,{useState,useEffect} from 'react';
import "./ListItem.less"
import ApiIndex from '@/api/equipment.js';
function ListItem({ item, history, changePserson,basicColumns }) {

    const getStatusTxt = v => {
        let txt = basicColumns[0].find(el => el.value == v)?.label
        return txt
    }

    const touchList = () => {
        history.push("/equipmentDetail", { no: item.no })
    }
    const getcolor = (status) => {
        if (status == 'TO_BE_REPAIRED' || status == 'CANCEL_TO_BE_CONFIRMED') {
            return "red"
        } else if (status == 'REPAIRED_TO_BE_CONFIRMED') {
            return "#0ECF00"
        } else if (status == 'REPAIRING') {
            return "#FFBB00"
        }
    }

    const change = (e) => {
        e.stopPropagation()
        changePserson(item)
    }
    return (
        <>
            <div className="box" onClick={touchList}>
                <div className="boxTit">
                    <span className="boxTitSize">维修单号:{item.no}</span>
                    <span style={{ color: "#fff", fontSize: 12 }} onClick={e => change(e)}>任务转派</span>
                </div>
                <div className="boxContent">
                    <div className="bcLine borderB">
                        <span className="bcLineSize">维修状态:</span>
                        <span className="bcLineSize" style={{ color: getcolor(item.status) }} >{item.status == 'TO_BE_REPAIRED' ? '待维修' :
                            item.status == 'ACCEPTED' ? '已受理' :
                                item.status == 'REPAIRING' ? '维修中' :
                                    item.status == 'REPAIRED_TO_BE_CONFIRMED' ? '申请完成' :
                                        item.status == 'REPAIRED' ? '已完成' :
                                            item.status == 'CANCEL_TO_BE_CONFIRMED' ? '申请取消' : '取消'
                        }</span>
                    </div>
                    <div className="bcLine borderB">
                        <span className="bcLineSize">设备信息:</span>
                        <span className="bcLineSize">{item.deviceName}</span>
                    </div>
                    <div className="bcLine borderB">
                        <span className="bcLineSize">报修时间:</span>
                        <span className="bcLineSize">{item.createTime}</span>
                    </div>
                    <div className="bcLine borderB">
                        <span className="bcLineSize">设备位置:</span>
                        <span className="bcLineSize">{item.deviceLocation}</span>
                    </div>
                    <div className="bcLine borderB">
                        <span className="bcLineSize">报修人:</span>
                        <span className="bcLineSize">{item.createUsername}</span>
                    </div>
                    <div className="bcLine borderB">
                        <span className="bcLineSize">任务类型:</span>
                        <span className="bcLineSize">{getStatusTxt(item.repairTaskType)}</span>
                    </div>
                </div>
            </div>
        </>
    );
}

export default ListItem;
